<template>
	<view class="cmAdd-page">
		<view class="main-content">
			<view class="formContainer">
				<!-- 违规消纳 -->
				<u-form v-model="form" ref='uForm' v-if="reporttype==0">
					<u-form-item label="属地:" label-width="200" prop="territory">
						<input class="input" v-model="form.territory" type="area" placeholder="请输入属地" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="场地地址:" label-width="200" prop="siteAddress">
						<input class="input" v-model="form.siteAddress" type="area" placeholder="请输入场地地址" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="场地名称:" label-width="200" prop="siteName">
						<input class="input" v-model="form.siteName" type="area" placeholder="请输入场地名称" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="地块编号:" label-width="200" prop="siteNum">
						<input class="input" v-model="form.siteNum" type="area" placeholder="请输入地块编号" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="所在街镇:" label-width="200" prop="street">
						<input class="input" v-model="form.add" type="area" placeholder="请输入所在街镇" @click="" 
							input-align="right" />
					</u-form-item>
					<u-form-item label="位置定位:" label-width="200" prop="address">
						<input class="input" v-model="form.address" type="area" placeholder="点击获取定位" @click="getLocation" disabled="true"
							input-align="right" />
					</u-form-item>
					<view class="line"></view>
					<u-form-item label="土地性质:" label-width="200" prop="landNature">
						<input class="input" v-model="form.landNature" type="area" placeholder="请输入土地性质" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="土地使用性质:" label-width="200" prop="landUseNature">
						<input class="input" v-model="form.landUseNature" type="area" placeholder="请输入土地使用性质" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="项目属性:" label-width="200" prop="projectProperty">
						<input class="input" v-model="form.projectProperty" type="area" placeholder="请输入项目属性" @click=""
							input-align="right" />
					</u-form-item>
					<view class="line"></view>
					<u-form-item label="上报单位:" label-width="200" prop="ownerUnit">
						<input class="input" v-model="form.ownerUnit" type="area" placeholder="请输入上报单位" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="负责人:" label-width="200" prop="contacts">
						<input class="input" v-model="form.contacts" type="area" placeholder="请输入负责人" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="联系方式:" label-width="200" prop="contactNumber">
						<input class="input" v-model="form.contactNumber" type="text" placeholder="请输入联系方式" @click=""
							input-align="right" />
					</u-form-item>
					<view class="line"></view>
					<u-form-item label="施工单位:" label-width="200" prop="constructionContractor">
						<input class="input" v-model="form.constructionContractor" type="text" placeholder="请输入施工单位"
							input-align="right" />
					</u-form-item>
					<u-form-item label="施工单位联系人:" label-width="200" prop="contractorContacts">
						<input class="input" v-model="form.contractorContacts" type="area" placeholder="请输入施工单位联系人"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="施工单位联系方式:" label-width="200" prop="contractorContactNumber">
						<input class="input" v-model="form.contractorContactNumber" type="area"
							placeholder="请输入施工单位联系方式" @click="" input-align="right" />
					</u-form-item>
					<view class="line"></view>
					<u-form-item label="建设单位:" label-width="200" prop="constructionEmployer">
						<input class="input" v-model="form.constructionEmployer" type="text" placeholder="请输入建设单位"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="建设单位联系人:" label-width="200" prop="employerContacts">
						<input class="input" v-model="form.employerContacts" type="area" placeholder="请输入建设单位联系人"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="建设单位联系方式:" label-width="200" prop="employerContactNumber">
						<input class="input" v-model="form.employerContactNumber" type="area" placeholder="请输入建设单位联系方式"
							@click="" input-align="right" />
					</u-form-item>
					<view class="line"></view>
					<u-form-item label="上报部门:" label-width="200" prop="ownerDepartment">
						<input class="input" v-model="form.ownerDepartment" type="area" placeholder="请输入上报部门" @click=""
							input-align="right" />
					</u-form-item>
			
					<u-form-item label="出土信息:" label-width="200" prop="earthInfo">
						<input class="input" v-model="form.earthInfo" type="area" placeholder="请输入出土信息" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="招标信息:" label-width="200" prop="tenderInfo">
						<input class="input" v-model="form.tenderInfo" type="area" placeholder="请输入招标信息" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="备注:" label-width="200" prop="comment">
						<input class="input" v-model="form.comment" type="text" placeholder="请输入备注" @click=""
							input-align="right" />
					</u-form-item>
					<view class="line"></view>
	
					<u-form-item label="实际结束时间:" label-width="200" prop="endTime">
						<input v-if="!showendTime" class="input" v-model="form.endTime" type="text"
							placeholder="请选择实际结束时间" @focus="showendTime=true" input-align="right" />
						<view class="timepicker" v-else>
							<picker class="" mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateendTime">
								<view class="uni-input">{{date}}-</view>
							</picker>
							<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeendTime">
								<view class="uni-input">{{time}}:00</view>
							</picker>
						</view>
					</u-form-item>
					<u-form-item label="开工时间:" label-width="200" prop="startTime">
						<input v-if="!showstartTime" class="input" v-model="form.startTime" type="text"
							placeholder="请选择开工时间" @focus="startTime=true" input-align="right" />
						<view class="timepicker" v-else>
							<picker class="" mode="date" :value="date1" :start="startDate" :end="endDate"
								@change="bindDatestartTime">
								<view class="uni-input">{{date1}}-</view>
							</picker>
							<picker mode="time" :value="time1" start="09:01" end="21:01" @change="bindTimestartTime">
								<view class="uni-input">{{time1}}:00</view>
							</picker>
						</view>
					</u-form-item>
					<view class="line"></view>
					<u-form-item label="总出土量:" label-width="200" prop="allEarthQuantity">
						<input class="input" v-model="form.allEarthQuantity" type="text" placeholder="请输入总出土量" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="预计全年出土量–单位：万方:" label-width="200" prop="annualEarthQuantity">
						<input class="input" v-model="form.annualEarthQuantity" type="number" placeholder="请输入全年出土量"
							input-align="right" />
					</u-form-item>
					<u-form-item label="宕渣出土量–单位：立方米:" label-width="200" prop="dangEarthQuantity">
						<input class="input" v-model="form.dangEarthQuantity" type="area" placeholder="请输入宕渣出土量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="黄土出土量–单位：立方米:" label-width="200" prop="loessEarthQuantity">
						<input class="input" v-model="form.loessEarthQuantity" type="area" placeholder="请输入黄土出土量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="渣土出土量–单位：立方米:" label-width="200" prop="muckEarthQuantity">
						<input class="input" v-model="form.muckEarthQuantity" type="area" placeholder="请输入渣土出土量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="建筑废砖出土量–单位：吨:" label-width="200" prop="wasterEarthQuantity">
						<input class="input" v-model="form.wasterEarthQuantity" type="area" placeholder="请输入建筑废砖出土量"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="其他出土量–单位：吨" label-width="200" prop="otherEarthQuantity">
						<input class="input" v-model="form.otherEarthQuantity" type="area" placeholder="请输入其他出土量"
							@click="" input-align="right" />
					</u-form-item>
					
					<u-form-item label="种植土出土量–单位：立方米:" label-width="200" prop="plantingSoilEarthQuantity">
						<input class="input" v-model="form.plantingSoilEarthQuantity" type="area"
							placeholder="请输入种植土出土量" @click="" input-align="right" />
					</u-form-item>
					<u-form-item label="泥浆出土量–单位：吨:" label-width="200" prop="slurryEarthQuantity">
						<input class="input" v-model="form.slurryEarthQuantity" type="area" placeholder="请输入泥浆出土量"
							@click="" input-align="right" />
					</u-form-item>
					<view class="line"></view>
					
					<u-form-item label="测绘报告（附件图片）:" label-width="200" prop="surveyReport">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess' @on-error='uperr'></u-upload>
					</u-form-item>
				
					<u-form-item label="招标清单（附件图片）:" label-width="200" prop="tenderList">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess1' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="冲洗设备（附件图片）:" label-width="200" prop="flushingEquipment">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess2' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="施工合同（附件图片）:" label-width="200" prop="constructionContract">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess3' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="防尘降尘（附件图片）:" label-width="200" prop="dustControl">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess4' @on-error='uperr'></u-upload>
					</u-form-item>
					
					<u-form-item label="德清县建筑垃圾处置审核申请表（附件图片）:" label-width="200" prop="garbageDisposalForm">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess5' @on-error='uperr'></u-upload>
					</u-form-item>
				
					<u-form-item label="出入口道路硬化（附件图片）:" label-width="200" prop="accessRoadSclerosis">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess6' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="视频/道闸监控（附件图片）:" label-width="200" prop="videoSurveillance">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess7' @on-error='uperr'></u-upload>
					</u-form-item>
					<u-form-item label="地磅（附件图片）:" label-width="200" prop="weighbridge">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess8' @on-error='uperr'></u-upload>
					</u-form-item>

				</u-form>
			</view>
		</view>
		<!-- 来源 -->
		<u-select v-model="ValidityTermSelectShow" :list="ValidityTermList" @confirm="ValidityTermSelectConfirm"
			:show="true"></u-select>
		<!-- 来源 -->
		<u-select v-model="streetSelectShow" :list="streetList" @confirm="streetSelectConfirm" :show="true"></u-select>

		<u-toast ref="uToast" />
		<view class="footer">
			<button class="cancel" type="default" @click="backtopage">取消</button>
			<button class="confim" type="default" @click="doAdd">提交</button>
		</view>
	</view>

	<!-- 	<view>
			<canvas style="width: 561rpx; height: 720rpx;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
			<img id='imgs' :src="url" mode=""></img>
		</view>
		<button @click="test1">ceshi</button> -->

</template>

<script>
	import {
		uploadUrl
	} from '@/pages/api/report/helperOrderp.js'
	import {
		getItemOrderList,
		getItemDetail,
		getItemorgList,
	} from '@/pages/api/orderp/orderp.js'
	import {
		mapState
	} from "vuex";
	import timePicker from '@/components/wing-time-selector/wing-time-selector.vue';
	import methodMix from './methodMix.js'
	export default {
		mixins: [methodMix],
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				shareCanvas: '',
				shareUpHead: '',
				white_img: 'http://p8.itc.cn/images01/20200612/4da0b8b6b6c5444699ba4433344bd962.jpeg',
				imagez: 'http://10.214.48.6/skkj/truck_muck/浙F68536911223201735588557picAbbreviate.jpg',
				url: '../../../static/form.jpg',
				processId: '',
				org_id: '',
				form: {
					// address: '山东省日照市东港区学苑路217号日照文化创意产业园',
					address: '',
					name: '',
					enclosurePath: '',
					reportUserName: '',
					fieldValidityTerm: '',
					informationNote: '',
					isValid: 0,
					reportUserId: '',
					responsibleSubject: '',
					type: '',
					vehicleType: '',
					actionCause: '',
					arrestLocation: '',
					arrestPersonnel: '',
					arrestTime: '',
					carNumber: '',
					closingTime: '',
					departureTime: '',
					filingNumber: '',
					filingTime: '',
					fleet: '',
					handingUnit: '',
					party: '',
					penaltyAmount: '',
					seizureGoodsType: '',
					transportTool: '',
					zhatuSource: '',
					zhatuWhereabouts: '',
					reportType: '',

					accessRoadSclerosis: "",
					allEarthQuantity: "",
					annualEarthQuantity: "",
					comment: "",
					constructionContract: "",
					constructionContractor: "",
					constructionEmployer: "",
					contactNumber: "",
					contacts: "",
					contractorContactNumber: "",
					contractorContacts: "",
					dangEarthQuantity: "",
					dustControl: "",
					earthInfo: "",
					employerContactNumber: "",
					employerContacts: "",
					endTime: "",
					estimatedEndTime: "",
					flushingEquipment: "",
					garbageDisposalAgreement: "",
					garbageDisposalForm: "",
					garbageType: "",
					illegalWorkOrderNum: 0,
					landNature: "",
					landUseNature: "",
					lat: 0,
					lng: 0,
					loessEarthQuantity: "",
					muckEarthQuantity: "",
					otherEarthQuantity: "",
					ownerDepartment: "",
					ownerUnit: "",
					plantingSoilEarthQuantity: "",
					projectProperty: "",
					siteAddress: "",
					siteArea: "",
					siteName: "",
					siteNum: "",
					siteType: "",
					slurryEarthQuantity: "",
					startTime: "",
					street: "",
					surveyReport: "",
					tenderInfo: "",
					tenderList: "",
					territory: "",
					videoSurveillance: "",
					wasterEarthQuantity: "",
					weighbridge: ""
				},
				ValidityTermSelectShow: false, //问题类型选择器显隐
				streetSelectShow: false, //大类选择器显隐
				showPicker: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				time: '12:01',
				time1: '12:01',
				time2: '12:01',
				time3: '12:01',
				date: currentDate,
				date1: currentDate,
				date2: currentDate,
				date3: currentDate,
				showendTime: false,
				showstartTime: false,
				showclosingTime: false,
				showfilingTime: false,
				showarrestTime: false,
				showdepartureTime: false,
				value: '',
				ValidityTermList: [{
						value: 1,
						label: '是'
					},
					{
						value: 2,
						label: '否'
					}
				],
				streetList: [{
						value: 1,
						label: '武康街道'
					},
					{
						value: 2,
						label: '莫干山镇'
					},
					{
						value: 3,
						label: '阜溪街道'
					},
					{
						value: 4,
						label: '洛舍镇'
					},
					{
						value: 5,
						label: '钟管镇'
					},
					{
						value: 6,
						label: '新市镇'
					},
					{
						value: 7,
						label: '禹越镇'
					},
					{
						value: 8,
						label: '新安镇'
					},
					{
						value: 9,
						label: '雷甸镇'
					},
					{
						value: 10,
						label: '乾元镇'
					},
					{
						value: 11,
						label: '舞阳街道'
					},
					{
						value: 12,
						label: '康乾街道'
					}
				],
				fileChooseTabList: [{
					name: '拍照',
					pic: '/static/reportadd/addph.png'
				}],
				photoList: [], //图片列表
				photoList1: [], //图片列表
				photoList2: [], //图片列表
				photoList3: [], //图片列表
				photoList4: [], //图片列表
				photoList5: [], //图片列表
				photoList6: [], //图片列表
				photoList7: [], //图片列表
				photoList8: [], //图片列表
				typeMainList: [],
				typeSubList: [],
				voiceSuccessForm: {}, //语音上传成功返回地址
				rules: {
					Name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur,change'
					}],
					type: [{
						required: true,
						message: '请输入问题类型',
						trigger: 'blur,change'
					}],
					siteConditions: [{
						required: true,
						message: '请输入描述',
						trigger: 'blur'
					}],
				},
				tipsContent: '',
				isPlaying: false,
				timeparams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				showtime: false,
				sourceSelectShow: false,
				nowdate: new Date().getFullYear(),
				sbtime: '请选择时间',
				templetes: '模板',
				videoList: [],
				action: 'http://172.21.188.5:8085/zhatu/file/upload',
				fileList: [],
				reporttype: 0
			}
		},
		onLoad(op) {
			this.getLocation()
		},
		mounted() {
			this.createOrder()
		},
		methods: {
			//开单流程
			createOrder() {
				getItemOrderList().then(res => {
					console.log(res.rows[0].itemId)
					this.processId = res.rows[0].itemId
					getItemorgList({
						itemId: this.processId
					}).then(res => {
						this.org_id = res[0].org_id
						console.log(res[0].org_id, 666)
					})
					getItemDetail({
						id: res.rows[0].itemId
					}).then(d => {
						console.log(d.formItem.colunm)
						d.formItem.colunm.forEach(n => {
							console.log(n.name)
						})
					})
				})
			},
			test1() {
				let that = this
				var ctx = uni.createCanvasContext('firstCanvas')
				let width_view = 750
				uni.getImageInfo({
					src: 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/lADPDhJzw1ivCibNCjXNB6s_1963_2613jpg_720x720q90gjpg20210712155734155.jpeg',
					success: res => {
						var ctx = uni.createCanvasContext("firstCanvas") // 使用画布创建上下文 图片
						ctx.drawImage(res.path, 0, 0, 300,
							300) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
						ctx.fillText("内容zymm", 240, 40); //文字内容、x坐标，y坐标
						ctx.font = 'normal 40px STXingkai'; // 字体
						ctx.setFontSize(10); //设置字体大小，默认10
						ctx.setFillStyle('#DD524D');
						ctx.fillText("width:" + ctx.measureText('三生三世').width, 50, 50);
						ctx.save(); //保存
						ctx.draw() //绘制
						setTimeout(() => {
							// canvas操作后最好延时生成图片,不然可能有问题
							let re = uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 561,
								height: 720,
								destWidth: 1122,
								destHeight: 1440,
								quality: 1,
								canvasId: 'firstCanvas',
								success: res => {
									// 在H5平台下，tempFilePath 为 base64  
									console.log(res, that)
									// this.url = res.tempFilePath

									uni.compressImage({
										src: res.tempFilePath,
										quality: 100,
										success: res => {
											let filePath = res.tempFilePath
											uni.uploadFile({
												url: uploadUrl,
												filePath,
												name: 'file',
												formData: {
													itemId: 'chengguansuishoupai'
												},
												success: (uploadFileRes) => {
													console.log(uploadFileRes)
												},
												fail: err => {
													console.log(err)
												}
											});
										}
									})

								}
							});
						}, 200)

					}
				})

			},
			//提交表单
			submitForm(form) {
				// 手动提交表单
				this.$refs.form.submit().then((res) => {
					console.log('表单返回得值：', res)
				})
			},
			bindTimeendTime(e, i) {
				console.log(e, i)
				this.time = e.target.value
				this.endTime = this.date + ' ' + this.time + ':00'
			},
			bindDateendTime(e, i) {
				console.log(e, i)
				this.date = e.target.value
				this.endTime = this.date + ' ' + this.time + ':00'

			},

			//开工时间
			bindTimestartTime(e, i) {
				this.time1 = e.target.value
				this.startTime = this.date1 + ' ' + this.time1 + ':00'
			},
			bindDatestartTime(e, i) {
				this.date1 = e.target.value
				this.startTime = this.date1 + ' ' + this.time1 + ':00'
			},
			//放车时间
			bindTimedepartureTime(e, i) {
				this.time2 = e.target.value
				this.departureTime = this.date2 + ' ' + this.time2 + ':00'
			},
			bindDatedepartureTime(e, i) {
				this.date2 = e.target.value
				this.departureTime = this.date2 + ' ' + this.time2 + ':00'
			},
			//查扣时间
			bindTimearrestTime(e, i) {
				this.time3 = e.target.value
				this.arrestTime = this.date3 + ' ' + this.time3 + ':00'
			},
			bindDatearrestTime(e, i) {
				this.date3 = e.target.value
				this.arrestTime = this.date3 + ' ' + this.time3 + ':00'
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//返回上一级
			backtopage() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	#imgs {
		height: 116rpx;
		width: 116rpx;
		margin-bottom: 22rpx;
	}
	.main-content {
		flex: 1;
		background-color: #F2F3F5;
		overflow: scroll;
	
	
		.formContainer {
			margin-top: 18rpx;
			padding: 18rpx 27rpx 0 41rpx;
			background-color: #FFFFFF;
		}
	}
	.line{
		height: 20rpx;
		width: 750rpx;
		margin-left: -41rpx;
		background-color: #F2F3F5;
		font-size: 29rpx;
		color: #656A74;
	}
	.footer {
		display: flex;
		width: 100%;
		height: 174rpx;
		background-color: #FFFFFF;
		font-size: 29rpx;
		border-top: 1rpx soild #000000;

		.cancel {
			height: 87rpx;
			width: 339rpx;
			border: 1rpx solid #2E5AFB;
			border-radius: 50rpx;
			color: #2E5AFB;
			margin-top: 14rpx;
			margin-left: 29rpx;
		}

		.confim {
			height: 87rpx;
			width: 339rpx;
			border: 1rpx solid #2E5AFB;
			border-radius: 50rpx;
			background-color: #2E5AFB;
			color: #FFFFFF;
			margin-top: 14rpx;
			margin-left: 14rpx;
		}
	}

	.cmAdd-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F2F3F5;
	}



	.timepicker {

		display: flex;
	}
</style>
